<!--chose-table 选择表格 -->
<template>
  <div class="chose-table">
    <div class="chose-table-shade" @click="$emit('closeShade')"></div>
    <dl class="chose-table-radio-container">
      <dd class="chose-table-radio-dd" v-for="(item, index) in PreFeeApplyList" :key="index">
        <label>
          <input type="radio" name="table" class="radio-input" :value="item.FINANCEPROINST_ID" :checked="item.FINANCEPROINST_ID === checkId" @change="changeFunc($event.currentTarget, item)"/>
          <span class="radio-core"></span>
        </label>
        <div class="chose-name">
          <div class="chose-title">
            <img class="type-img-01" v-if="item.ACCEPT_TYPE.toString() === '401101'" src="../../assets/img/icon-05.png" alt="">
            <img class="type-img-02"  v-else src="../../assets/img/icon-04.png" alt="">
            <span class="type-name">{{item.ACCEPT_TYPE.toString() === '401101' ? '行政资产申购' : '公务接待' }}</span>
            </div>
          <div class="radio-content" @click="$emit('transfer', item)"><span class="time">{{item.FINANCEPROINST_CREATEDATE}}</span><span class="code">{{item.ACCEPT_CODE}}</span></div>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui'
export default {
  name: '',

  data () {
    return {
      PreFeeApplyList: []
    }
  },
  props: {
    'check-id': {
      default: ''
    },
    'fid': {
      default: ''
    }
  },
  components: {},

  computed: {},
  watch: {
    checkId (after, before) {
      console.log(after, before, 'checkid')
    }
  },
  methods: {
    changeFunc (target, item) {
      if (target.checked === true) {
        this.$emit('changeCheck', item)
      }
    }
  },
  created () {
      Indicator.open({
        text: '加载中……',
        spinnerType: 'fading-circle'
      })
    this.$api.post(this.$apiPath.baseURL, this.$apiPath.url, {
      action_type: 'GetPreFeeApply',
      FINANCEPROINST_ID: this.fid
    }).then((res) => {
      Indicator.close()
      if (res && res.data && res.data.PreFeeApplyList && res.data.PreFeeApplyList.length > 0) {
        this.PreFeeApplyList = res.data.PreFeeApplyList
      }
    })
  },
  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.chose-table
  position relative
  width 100%
  height 100%
  display flex
  flex-flow column nowrap
  justify-content center
  .chose-table-shade
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    background-color rgba(0,0,0,0.7)
  .chose-table-radio-container
    position absolute
    left 0
    right 0
    margin 0 auto
    width 90%
    min-height 2.5rem * $rem
    padding 5%
    background-color #ffffff
    border-radius 0.1rem * $rem
    .chose-table-radio-dd
      width 100%
      display flex
      flex-flow row nowrap
      justify-content flex-start
      align-items flex-start
      padding 0.2rem * $rem 0
      border-bottom 0.02rem * $rem solid #dddddd
    .chose-table-radio-dd:last-child
      border-bottom none
.radio-input
  display none
  cursor pointer
.radio-input:checked + .radio-core
  background-color #26a2ff
  border-color #26a2ff
.radio-core
  box-sizing border-box
  display inline-block
  background-color #fff
  border-radius 100%
  border 1px solid #ccc
  position relative
  width 20px
  height 20px
  vertical-align middle
.radio-core::after
  content ' '
  border-radius 100%
  top 5px
  left 5px
  position absolute
  width 8px
  height 8px
  transition -webkit-transform 0.2s
  transition transform 0.2s
  transition transform 0.2s, -webkit-transform 0.2s
  transform scale(0)
.radio-input:checked + .radio-core::after
  background-color #fff
  transform scale(1)
.radio-content
  display flex
  flex-flow row nowrap
  justify-content space-between
  align-items center
  flex 1
  flex-basis none
  .time
    font-size 0.26rem * $rem
    color #333
  .code
    font-size 0.26rem * $rem
    color #333
.chose-name
  flex 1 1 auto
  padding-left 0.2rem * $rem
  .chose-title
    display flex
    justify-content flex-start
    align-items center
    .type-img-01
      width 0.25rem * $rem
    .type-img-02
      width 0.4rem * $rem
    .type-name
      font-size 0.3rem * $rem
      color #333
      font-weight bold
      padding-left 0.1rem * $rem
</style>
